import { ref, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import store from '@/store'
import router from '@/router'
import Message from '@/components/library/message'
import dayjs from 'dayjs'

/**
 * 数据懒加载函数
 * @param { Function } apiFn 请求API函数
 * @returns { Object } { result: 请求结果, target: 被检测元素 }
 * useLazyData(() => findBrandList(10)) lambda解决参数问题
 */

export const useLazyData = apiFn => {
	// 准备响应式数据
	const result = ref([])
	// 配合标签的 ref 属性使用
	const target = ref(null)
	// stop 是一个函数，用于停止检测元素可见性
	const { stop } = useIntersectionObserver(
		target,
		// isIntersecting 布尔值，元素可见为 true，元素不可见为 false
		([{ isIntersecting }], observerElement) => {
			// 如果目标可见，发送请求
			if (isIntersecting) {
				// 获取请求，更新响应式数据
				apiFn().then(v => {
					result.value = v.result
				})
				// 主动停止检测元素可见性  不然每次离开进入都会请求
				stop()
			}
		},
		// 配置参数 当组件进入可视区时 与可视区相交的比例 固定值
		// 组件越大进入的越大才会触发 0--进入直接触发
		{
			threshold: 0.01,
		}
	)
	// 响应式数据给模板使用
	//   target    被检测元素
	//   result    请求结果
	return { target, result }
}

/**
 * 封装 倒计时按钮  默认 60秒
 * 组件销毁时  也要停止定时器
 * onUnmounted(() => pause())
 *
 * 点击按钮
 * time.value = 60
 * resume()
 *
 * interval = 默认1秒 间隔
 *
 * 使用 dayjs 插件  格式化时间 format('mm分ss秒')
 *
 * 1 只显示 倒计时  time resume
 * 2 显示格式化倒计时 format = true 解构出 time resumeForFirst
 */

export const useCountDownBtn = (format = false, interval = 1) => {
	const time = ref(0)
	const timeText = ref('')
	// 1 回调函数 2 时间间隔 3 是否立刻执行
	const { resume, pause } = useIntervalFn(
		// 一秒后才会执行
		() => {
			time.value--
			if (format) {
				// const { m, s } = useTimeFormat(time.value)
				// timeText.value = `${m}分${s}秒`
				timeText.value = dayjs.unix(time.value).format('mm分ss秒')
			}
			if (time.value < 0) {
				if (format) {
					timeText.value = '已经超时'
				}
				pause()
			}
		},
		interval * 1000,
		{
			immediate: false,
		}
	)
	// 组件销毁时，也要清理 window 中定时器
	onUnmounted(() => {
		pause()
	})
	// 自定义开启定时器  避免第一秒等待期的空白
	const resumeForFirst = () => {
		// const { m, s } = useTimeFormat(time.value)
		// timeText.value = `${m}分${s}秒`
		timeText.value = dayjs.unix(time.value).format('mm分ss秒')
		// 一秒后执行
		resume()
	}
	return { time, timeText, resume, resumeForFirst }
}

/**
 *  Format time -- 秒--> 小时 分钟 秒
 */

export const useTimeFormat = time => {
	// 转换为 时 分 秒
	let h = parseInt((time / 60 / 60) % 24)
	h = h < 10 ? '0' + h : h
	let m = parseInt((time / 60) % 60)
	m = m < 10 ? '0' + m : m
	let s = parseInt(time % 60)
	s = s < 10 ? '0' + s : s
	// 作为返回值返回
	return { h, m, s }
}

/**
 * lambda解决参数问题
 * QQ直接登陆 QQ绑定手机号
 * 实现vuex存储数据 跳转来源页或者首页
 */

export const useQQLoginSavePush = async apiFn => {
	try {
		const { result } = await apiFn()
		const { id, avatar, nickName, account, mobile, token } = result
		store.commit('user/setUser', {
			id,
			avatar,
			nickName,
			account,
			mobile,
			token,
		})
		// 登陆成功 合并本地购物车
		await store.dispatch('cart/mergeCart')
		router.push(store.state.user.redirectUrl)
		Message({ type: 'success', message: 'QQ登录成功' })
		return 'success'
	} catch (error) {
		console.dir(error)
		return Promise.reject(error)
	}
}
